<template>
  <div>
    {{ man }}
  </div>
  <hr>
  <div>
    toRef:{{ like }}
  </div>
  <div>
    <button @click="change">修改</button>
  </div>
</template>

<script setup lang="ts">
  import {ref, toRef, reactive, toRaw} from 'vue'
  // toRef  只能修改响应式对象的值  非响应式视图毫无变化
  // toRef toRefs  用于结构reactive的值 才能生成响应式的数据
  // toRaw  用于获取reactive的非响应数据
  
  //  const man = {name: "小满", age: 23, like: "JK"} // toRef 对此毫无变化
  //  const man = ref({name: "小满", age: 23, like: "JK"}) // toRef 对此产生变化
  const man = reactive({name: "小满", age: 23, like: "JK"}) // toRef 对此产生变化

  const toRefs = <T extends object>(object:T) => {
    const map:any = {}

    for(let key in object) {
      map[key] = toRef(object, key)
    }

    return map
  }

  const {name, age, like} = toRefs(man)

  console.log(name, age, like)

  // const like = toRef(man, 'like')

  //  userDemo(toRef(man, 'like'))

  const change = () => {
    man.like = "洛丽塔"
    like.value = "洛丽塔"
    console.log(man, like)
    // console.log(man, toRaw(man))
    console.log(man, man['__v_raw'])
  }
  


</script>

<style scoped>

</style>